<template>
	<div id="ClientReturnFlow">
		<x-header :left-options="{showBack: false}" title="退款物流信息" class="header">
			<a slot="left" @click="back()"><i class="tp-icon icon-black-back"></i></a>
		</x-header>
		<div class="goods-wrap">
			<div class="title vux-1px-b">
				<img src="../assets/images/home/icon_beizhu.jpg" alt="" />
				<h2>{{goods_return.shop_name}}</h2>
			</div>
			<div class="content">
				<img v-if="goods_return.goods_id == undefined" src="../assets/images/home/defaultImg.jpg" alt="" />
				<img v-else :src="'/los/uploads/thumb/goods/' + goods_return.goods_id + '_76X76.jpeg'" alt="" />
				<div class="desc">
					<h2>{{goods_return.goods_name}}</h2>
					<p class="money">成交金额 <span>￥{{goods_order.pay_money}}</span></p>
					<p class="timer">同意退货：{{common.timestampToTime(goods_return.return_starttime)}}</p>
				</div>
			</div>
			<div class="return-money vux-1px-t">
				<p>退款金额 <span>￥{{goods_return.return_money}}</span></p>
			</div>
		</div>
		<div class="return-address">
			<h2 class="vux-1px-b">商家退货地址</h2>
			<div class="info">
				<p class="receive-name">收货人：{{goods_return.receiver_name}} <span>{{goods_return.receiver_tel}}</span></p>
				<p class="receive-add">{{goods_return.receiver_province}}{{goods_return.receiver_city}}{{goods_return.receiver_county}}{{goods_return.receiver_address}}</p>
			</div>
		</div>
		<div class="return-type">
			<span class="title">退货方式</span>
			<checklist :options="commonList" v-model="radioValue" :max="1" @on-change="change" class="checklist"></checklist>
		</div>
		<div class="cert-content" v-if="returnType == '填写物流'">
			<ul>
				<li class="vux-1px-b">
					<x-input title="物流公司" v-model="express_company" type="text" placeholder="请输入物流公司" :show-clear="false" required/>
				</li>
				<li class="ex-number">
					<x-input title="运单号" v-model="express_number" type="text" placeholder="请输入运单号" :show-clear="false" required/>
				</li>
			</ul>
			<div class="qrcode" @click="scanWXQRcode">
				<img src="../assets/images/home/icon_camara_qrcode.png" alt="" />
			</div>
		</div>
		<actionsheet v-model="flowAlert" :menus="flowCheck" @on-click-menu-delete="returnFlow" :close-on-clicking-mask="false" show-cancel class="other-reason"></actionsheet>
		<toast v-model="success" type="text" width='4.5rem' is-show-mask>{{msg}}</toast>
		<button @click="submitFlow">确认退货</button>
	</div>
</template>

<script>
	import { XHeader, XInput, Actionsheet, Checklist, Toast } from 'vux'
	import wx from 'weixin-js-sdk';
	import $ from 'jquery'
	export default {
		data() {
			return {
				flowAlert: false,
				check1: false,
				check2: false,
				check3: false,
				success: false,
				msg: '',
				express_company: '',
				express_number: '',
				order_sn: '',
				radioValue: [],
				commonList: ['填写物流', '未收到货', '拒收'],
				flowCheck: {
					'title.noop': '您确认提交退货物流信息？',
					delete: '<span style="color:#a30000">确认退货</span>'
				},
				goods_return: {},
				goods_order: {},
				returnType: '',
				return_sn: ''
			}
		},
		components: {
			XHeader,
			XInput,
			Actionsheet,
			Checklist,
			Toast
		},
		mounted() {
			this.getReturnRecord();
		},
		methods: {
			getReturnRecord: function() {
				this.return_sn = this.$route.params.return_sn;
				this.$http({
					method: 'GET',
					url: '/los/api/buyer/goods_return_details.json?return_sn=' + this.return_sn,
					data: ''
				}).then((result) => {
					this.goods_return = result.data.data.goods_return;
					this.goods_order = this.goods_return.goods_order;
				}).catch((err) => {

				})
			},
			//微信扫一扫
			scanWXQRcode: function() {
				let _this = this;
				let urls = window.location.href.split('#')[0];
				var params = {
					url: urls,
				}
				this.$http({
					method: 'POST',
					url: '/los/api/oauth/script',
					data: params,
				}).then((result) => {
					if(result) {
						wx.config({
							debug: result.data.debug,
							appId: result.data.appId,
							timestamp: result.data.timestamp,
							nonceStr: result.data.nonceStr,
							signature: result.data.signature,
							jsApiList: result.data.jsApiList,
						});
						wx.ready(function() {
							wx.scanQRCode({
								needResult: 1,
								scanType: ["qrCode", "barCode"],
								success: function(res) {
									_this.express_number = res.resultStr;
									_this.getCompanyDelivery(_this.express_number);
								}
							});
							wx.error(function(res) {
								alert(JSON.stringify(res));
							});
						})
					} else {
						alert('获取信息失败 请重新尝试');
					}
				}).catch((err) => {
					console.log(err);
				})
			},

			//提交物流信息
			submitFlow: function() {
				if(this.returnType == undefined) {
					this.success = !this.success;
					this.msg = '请选择退货方式'
				} else if(this.returnType == '填写物流') {
					if(this.express_comanay == '') {
						this.success = !this.success;
						this.msg = '请选择物流公司'
					} else if(this.express_number == '') {
						this.success = !this.success;
						this.msg = '请输入运单号'
					} else {
						this.flowAlert = !this.flowAlert;
					}
				} else {
					this.flowAlert = !this.flowAlert;
				}
			},
			getCompanyDelivery: function(express_number) {
				this.$http({
					method: 'GET',
					url: '/api/express/qurey_company.json?delivery_code=' + express_number,
				}).then((result) => {
					if(result.data.code == 1) {
						this.express_info = result.data.data.express_info.slice(0, 1);
						var comName;
						$.each(this.express_info, function(index, value) {
							comName = value.comName;
						})
						this.express_company = comName;
					}
				}).catch((err) => {

				})
			},
			returnFlow: function() {
				let express_type;
				if(this.returnType != '填写物流') {
					express_type = this.returnType;
				} else {
					express_type = this.express_company
				}
				var params = {
					return_sn: this.return_sn,
					express_company: express_type,
					express_number: this.express_number
				}
				console.log(params);
				this.$http({
					method: 'POST',
					url: '/los/api/buyer/goods_return_express.json',
					data: params
				}).then((result) => {
					if(result.data.code == 1) {
						this.success = !this.success;
						this.msg = result.data.msg;
						setTimeout(() => {
							location.href = '#/OrderInfo/order_sn/' + this.goods_order.order_sn + '?return_sn=' + this.return_sn;
						}, 500)
					}
				}).catch((err) => {

				})
			},

			change(val, label) {
				this.returnType = label[0];
			},
			back: function() {
				window.history.go(-1);
			}
		}
	}
</script>

<style scoped>
	.header {
		background: #fff;
	}
	
	.goods-wrap {
		margin-top: 0.34rem;
		width: 100%;
		padding: 0 0.26rem;
		background: #fff;
	}
	
	.goods-wrap .title {
		overflow: hidden;
		height: 1.14rem;
		line-height: 1.14rem;
	}
	
	.goods-wrap .title img {
		float: left;
		width: 0.37rem;
		height: 0.37rem;
		margin-top: 0.38rem;
		margin-right: 0.21rem;
	}
	
	.goods-wrap .title h2 {
		float: left;
	}
	
	.goods-wrap .content {
		overflow: hidden;
		padding: 0.26rem 0;
	}
	
	.goods-wrap .content img {
		float: left;
		width: 1.73rem;
		height: 1.73rem;
		border-radius: 0.05rem;
	}
	
	.goods-wrap .content .desc {
		float: left;
		margin-left: 0.21rem;
		width: 75%;
		overflow: hidden;
	}
	
	.goods-wrap .content .desc h2 {
		font-size: 0.37rem;
		color: #222;
		font-weight: normal;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	
	.goods-wrap .content .desc .money {
		margin-top: 0.32rem;
		font-size: 0.32rem;
		color: #666;
		line-height: 0.48rem;
	}
	
	.goods-wrap .content .desc .money span {
		color: #222;
	}
	
	.goods-wrap .content .desc .timer {
		font-size: 0.32rem;
		color: #666;
		line-height: 0.48rem;
	}
	
	.return-money {
		height: 1.3rem;
		line-height: 1.3rem;
		font-size: 0.4rem;
		color: #222;
	}
	
	.return-money span {
		color: #DD2828;
		font-size: 0.45rem;
	}
	
	.return-address {
		margin-top: 0.26rem;
		background: #fff;
		padding: 0 0.26rem;
	}
	
	.return-address h2 {
		height: 1.17rem;
		line-height: 1.17rem;
		font-size: 0.4rem;
		color: #222;
	}
	
	.return-address .receive-name {
		padding-top: 0.4rem;
		color: #666;
		font-size: 0.37rem;
		margin-bottom: 0.13rem;
	}
	
	.return-address .receive-name span {
		margin-left: 0.56rem;
	}
	
	.return-address .receive-add {
		padding-bottom: 0.4rem;
		color: #666;
		font-size: 0.37rem;
	}
	
	.return-type {
		overflow: hidden;
		height: 1.17rem;
		line-height: 1.17rem;
		background: #fff;
		padding: 0 0.26rem;
		margin-top: 0.26rem;
	}
	
	.return-type .title {
		float: left;
		font-size: 0.4rem;
		color: #222;
		width: 2.1rem;
	}
	
	.return-type .checklist {
		float: left;
		overflow: hidden;
		width: 76%;
		/*margin-left: 0.34rem;*/
	}
	
	.cert-content {
		background: #fff;
		width: 100%;
		position: relative;
		margin-top: 0.26rem;
		height: 100%;
	}
	
	.cert-content ul {
		width: 100%;
		padding: 0 0.26rem;
	}
	
	.cert-content>ul li {
		width: 100%;
		height: 1.3rem;
		line-height: 1.3rem;
		padding-top: 0.1rem;
	}
	
	.cert-content>ul li .weui-cell {
		padding: 0!important;
	}
	
	button {
		width: 9.46rem;
		height: 1.3rem;
		background: #a30000;
		border: none;
		color: #fff;
		margin: 1.04rem 0.26rem;
		font-size: 0.4rem;
		border-radius: 0.1rem;
	}
	
	.qrcode {
		width: 0.64rem;
		height: 0.53rem;
		position: absolute;
		right: 0.26rem;
		top: 1.69rem;
	}
	
	.qrcode img {
		width: 100%;
		height: 100%;
	}
</style>
<style>
	.return-type .checklist .weui-cell {
		float: left!important;
		padding: 0!important;
		height: 1.17rem!important;
		line-height: 1.17rem!important;
		margin-right: 0.4rem;
		overflow: hidden;
		font-size: 0.37rem;
	}
	
	.return-type .checklist .weui-cell:last-child {
		margin-right: 0;
	}
	
	.return-type .checklist .weui-cell:before,
	.return-type .checklist .weui-cells:before,
	.return-type .checklist .weui-cells:after {
		display: none;
	}
	
	.return-type .weui-cells_checkbox .weui-icon-checked {
		float: left;
	}
	
	.return-type .weui-cells_checkbox .weui-cell__hd {
		padding: 0;
	}
	
	.return-type .weui-cell__bd p {
		width: 1.5rem!important;
	}
	
	.return-type .weui-cells_checkbox .weui-check:checked+.weui-icon-checked:before {
		color: #FF8888;
		font-size: 0.42rem;
	}
	
	.return-type .weui-cells_checkbox .weui-icon-checked:before {
		font-size: 0.42rem;
	}
</style>